import { View } from "@tarojs/components";
import HeaderSearch from "@/components/HeaderSearch/index";
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import GoodsTitle from "@/components/GoodsTitle/index";
import { useEffect, useState } from "react";
import { Empty, Pagination } from "@taroify/core";
import { requestPOST } from "@/request";

export default function Index() {
  const [goods, setGoods] = useState<any>([]);
  const [current, setCurrent] = useState(1);
  const [count, setCount] = useState(0);

  const handleChange = (page: number) => {
    setCurrent(page);
    getGoods(page);
  };

  const getGoods = (page?: number) => {
    requestPOST("shop/getShopUserShoppingCarList", {
      pageNum: page || current,
      pageSize: 5,
    }).then((res: any) => {
      setCount(Math.ceil(res.total / 6));
      setGoods([...res.vos]);
    });
  };

  useEffect(() => {
    getGoods();
  }, []);

  return (
    <View className="taroBox">
      <HeaderSearch />
      <Header />
      <View>
        <GoodsTitle title="购物车管理" isMore={false} />
        <View style={{ padding: "14px" }}>
          <View>
            {!goods.length && (
              <Empty>
                <Empty.Image />
                <Empty.Description>暂无数据</Empty.Description>
              </Empty>
            )}
            {goods.map((item, index) => (
              <View
                key={index}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "5px",
                  boxShadow: "0 0 .3125rem 0 hsla(0, 0%, 49%, 0.45)",
                  padding: "10px",
                  fontSize: "14px",
                }}
              >
                <View>商品编号：{item.commodityId}</View>
                <View>商品名称：{item.commodityName}</View>
                <View>购买数量：{item.quantity}</View>
                <View>商品总价：{item.totalPrice}</View>
              </View>
            ))}
          </View>
          <View style={{ marginBlock: "1.25rem", padding: "0 .875rem" }}>
            <Pagination
              current={current}
              siblingCount={1}
              count={count}
              onChange={(page) => handleChange(page)}
            >
              <Pagination.Item type="start-ellipsis" />
              <Pagination.Item type="end-ellipsis" />
            </Pagination>
          </View>
        </View>
      </View>
      <Footer />
    </View>
  );
}
